{extend name="_/layout" /}

{block name="style"}
<link rel="stylesheet" href="__PLUGIN__/sweetalert/sweetalert.css" />
<link rel="stylesheet" href="__PLUGIN__/nestable/jquery-nestable.css" />
{/block}

{block name="body"}
<section class="content">
    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="header bg-light-blue">
                        <h2>角色列表</h2>
                        <ul class="header-dropdown m-r--5">
                            <li><a id="role-refresh" href="javascript:void(0);" data-toggle="cardloading"><i class="material-icons">loop</i></a></li>
                            <li><a id="role-add" href="javascript:void(0);"><i class="material-icons">queue</i></a></li>
                        </ul>
                    </div>
                    <div class="body">
                        <div class="clearfix m-b-20">
                            <div id="role_list" class="dd nestable-with-handle">
                                <ol class="dd-list">
                                    {foreach name="role_list" item="role" }
                                    <li class="dd-item dd3-item" data-id="{$role->id}">
                                        <div class="dd-handle dd3-handle"></div>
                                        <div class="dd3-content">
                                            {$role->name}
                                            <button type="button" class="role-del pull-right btn btn-danger btn-xs waves-effect">删除</button>
                                            <button type="button" class="role-edit pull-right btn btn-success btn-xs waves-effect" style="margin-right:10px;" data-toggle="modal" data-target="#modal">编辑权限</button>
                                        </div>
                                    </li>
                                    {/foreach}
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="defaultModalLabel">角色权限</h4>
            </div>
            <div class="modal-body">
                <div class="body">
                    <div class="row clearfix">
                        <div class="col-xs-12 ol-sm-12 col-md-12 col-lg-12">
                            <div class="panel-group" id="top_0" role="tablist" aria-multiselectable="true">
                                {foreach name="permission_list" item="module" }
                                <div class="panel panel-col-pink">
                                    <div class="panel-heading" role="tab">
                                        <h4 class="panel-title">
                                            <a role="button" data-toggle="collapse" href="#module_{$module.id}" aria-expanded="true" data-parent="#top_0">
                                                <i class="material-icons">{$module.icon}</i> {$module.name}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="module_{$module.id}" class="panel-collapse collapse in" role="tabpanel">
                                        <div class="panel-body">
                                            <div class="panel-group" id="top_{$module.id}" role="tablist" aria-multiselectable="true" style="margin-bottom:0">
                                                {foreach name="module.children" item="control" }
                                                <div class="panel panel-col-grey">
                                                    <div class="panel-heading" role="tab">
                                                        <h4 class="panel-title">
                                                            <a role="button" data-toggle="collapse" href="#control_{$control.id}" aria-expanded="true" data-parent="#top_{$module.id}">
                                                                <i class="material-icons">{$control.icon}</i> {$control.name}
                                                            </a>
                                                        </h4>
                                                    </div>
                                                    <div id="control_{$control.id}" class="panel-collapse collapse" role="tabpanel">
                                                        <div class="panel-body">
                                                            {foreach name="control.children" item="action"}
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-default waves-effect material-icons">done</button>
                                                                <button type="button" class="btn btn-default waves-effect" disabled>{$action.name}</button>
                                                                <button type="button" class="btn btn-default waves-effect dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="caret"></span>&nbsp;</button>
                                                                <ul class="dropdown-menu">
                                                                    <li><a href="javascript:void(0);" class="waves-effect waves-block">编辑</a></li>
                                                                    <li><a href="javascript:void(0);" class="waves-effect waves-block">删除</a></li>
                                                                </ul>
                                                            </div>
                                                            {/foreach}
                                                        </div>
                                                    </div>
                                                </div>
                                                {/foreach}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {/foreach}
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link waves-effect">保存</button>
                <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="__PLUGIN__/sweetalert/sweetalert.min.js"></script>
<script src="__PLUGIN__/nestable/jquery.nestable.js"></script>
<script>
    $(function() {
        $('#role-add').click(function() {
            swal({
                title: "新增角色",
                type: "input",
                showCancelButton: true,
                confirmButtonColor: "#4CAF50",
                confirmButtonText: "提交",
                cancelButtonText: "取消",
                closeOnConfirm: false,
                closeOnCancel: true,
                showLoaderOnConfirm: true,
                inputPlaceholder: "请输入角色名称"
            }, function(name) {
                if (name === false) return false;
                if (name !== '') {
                    $.post("{:url('user/role', ['operate' => 'add'])}", {name: name}, function(data) {
                        swal(data.msg, '', data.code == 1000 ? 'success' : 'error');
                        if(data.code == 1000) $('#role-refresh').click();
                    }, 'json');
                } else {
                    swal.showInputError("请输入角色名称后提交!");
                    return false
                }
            });
        });
        
        $('#role-refresh').on('click', function() {
            var $loading = $(this).parents('.card').waitMe({
                effect: 'pulse',
                text: '加载中...',
                bg: 'rgba(255,255,255,0.90)',
            });
            $.post("{:url('user/role', ['operate' => 'refresh'])}", function(data) {
                if(data.code == 1000){ 
                    var html = '';
                    $.each(data.data, function(k, v){
                        html += '<li class="dd-item dd3-item" data-id="'+v.id+'">'+
                                  '<div class="dd-handle dd3-handle"></div>'+
                                  '<div class="dd3-content">'+v.name+
                                      '<button type="button" class="role-del pull-right btn btn-danger btn-xs waves-effect">删除</button>'+
                                      '<button type="button" class="role-edit pull-right btn btn-success btn-xs waves-effect" style="margin-right:10px;" data-toggle="modal" data-target="#modal">编辑权限</button>'+
                                  '</div>'+
                              '</li>';
                    });
                    $('#role_list .dd-list').html(html);
                }
                $loading.waitMe('hide');
            }, 'json');
        });
        
        $('#role_list').nestable().on('change', function () {
            var data = JSON.stringify($(this).nestable('serialize'));
            $.post("{:url('user/role', ['operate' => 'sort'])}", {data:data}, function(data) {
                if(data.code == 1000) $('#role-refresh').click();
            }, 'json');
        }).on('click', '.role-edit', function(){
            
        }).on('click', '.role-del', function(){
            var id = $(this).parents('li').data('id');
            swal({
                title: "确定删除?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#4CAF50",
                confirmButtonText: "提交",
                cancelButtonText: "取消",
                closeOnConfirm: false,
                closeOnCancel: false,
                showLoaderOnConfirm: true,
            }, function (isConfirm) {
                if (isConfirm) {
                    $.post("{:url('user/role', ['operate' => 'del'])}", {id:id}, function(data) {
                        swal(data.msg, '', data.code == 1000 ? 'success' : 'error');
                        if(data.code == 1000) $('#role-refresh').click();
                    }, 'json');
                } else {
                    swal('操作已取消!', '', 'error');
                }
            });
        });
        
        
    });
</script>
{/block}
